import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Card, Table, message, InputNumber } from 'antd';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './ProgramDetail.less';
import { progType, progEntrAnimat, progExitAnimat, progSound } from '../../utils/city';
import { Link } from 'dva/router';
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const audits = ['待审核', '已通过', '已驳回'];

const tabList = [
  {
    key: 'detail',
    tab: '详情',
  },
];

const operationTabList = [
  {
    key: 'tab1',
    tab: '待审核',
  },
  {
    key: 'tab2',
    tab: '已通过',
  },
  {
    key: 'tab3',
    tab: '未通过',
  },
];
function snSort(a, b) {
  const keyA = a.matSn;
  const keyB = b.matSn;
  // Compare the 2 dates
  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
}
@connect(({ list, loading }) => ({
  list,
  loading: loading.effects['list/fetchMatList'],
}))
export default class ProgramDetail extends Component {
  state = {
    operationkey: 'tab1',
    snArray: {},
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const progId = this.props.match.params.progId;

    dispatch({
      type: 'list/fetchProgramDet',
      payload: {
        progId,
      },
    });
    dispatch({
      type: 'list/fetchMatList',
      payload: {
        progId,
      },
    });
  }
  // componentWillReceiveProps() {
  //   const {
  //     list: { matList, programInfo },
  //     loading,
  //   } = this.props;
  //   console.log('matlist', matList);
  //   if (matList.length > 0) {
  //     this.setState({ dataSource: matList });
  //   }
  //   // const matL = matList.map(item=> item.matSn=)
  // }
  onSubmit = progAuditStatus => {
    if (progAuditStatus === 0) {
      this.props.history.push('/program/programlist');
    } else {
      const progId = this.props.match.params.progId;
      const {
        list: { matList, programInfo },
      } = this.props;
      // console.log('pmAudi', matList.filter(item => item.pmAuditStatus === 0));
      if (matList.filter(item => item.pmAuditStatus === 0).length > 0) {
        message.error('仍有素材未审核，请审核全部待审核素材后再审核节目');
      } else {
        this.props.dispatch({
          type: 'list/auditProgram',
          payload: { progId, progAuditStatus },
          callback: () => this.props.history.push('/program/programlist'),
        });
      }
    }
  };
  onOperationTabChange = key => {
    this.setState({ operationkey: key });
  };

  onPress = (record, index, value) => {
    const { dispatch } = this.props;
    const progId = this.props.match.params.progId;
    //console.log('snArray', this.state.snArray[record.matId]);
    dispatch({
      type: 'list/auditProgramMat',
      payload: {
        progId,
        matId: record.matId,
        pmAuditStatus: value,
        matSn: record.matSn,
      },
    });
    // this.setState({ inputdisable: true });
  };
  extra = programInfo => {
    return (
      <Row>
        <Col xs={24} sm={12}>
          <div className={styles.textSecondary}>状态</div>
          <div className={styles.heading}>{audits[programInfo.progAuditStatus]}</div>
        </Col>
      </Row>
    );
  };
  saveMatSn = (value, row) => {
    this.props.dispatch({
      type: 'list/changeMatSn',
      payload: { value, row },
    });
    // const newArray = this.state.snArray;
    // newArray[row.matId] = value;
    // this.setState({ snArray: newArray });
  };
  description = programInfo => {
    return (
      <DescriptionList className={styles.headerList} size="small" col="2">
        <Description term="创建人">{programInfo.progAuthor}</Description>
        <Description term="节目名称">{programInfo.progName}</Description>
        <Description term="尺寸">{programInfo.progSize}</Description>
        <Description term="创建日期">{programInfo.createTime}</Description>
      </DescriptionList>
    );
  };
  action = programInfo => {
    if (programInfo.progAuditStatus === 0) {
      return (
        <Fragment>
          <ButtonGroup>
            <Button onClick={() => this.onSubmit(0)}>返回</Button>
            <Button onClick={() => this.onSubmit(2)}>驳回</Button>
          </ButtonGroup>
          <Button type="primary" onClick={() => this.onSubmit(1)}>
            通过
          </Button>
        </Fragment>
      );
    }
  };

  render() {
    const {
      list: { programInfo, matList },
      loading,
    } = this.props;
    const { progId } = this.props.match.params;
    const columns = [
      {
        title: '素材名',
        dataIndex: 'fileName',
        key: 'fileName',
      },
      {
        title: '播放类型',
        dataIndex: 'playType',
        key: 'playType',
      },
      {
        title: '入场动画',
        dataIndex: 'entrAnimat',
        key: 'entrAnimat',
        render: value => <span>{progEntrAnimat[value]}</span>,
      },
      {
        title: '结束动画',
        dataIndex: 'exitAnimat',
        key: 'exitAnimat',
        render: value => <span>{progExitAnimat[value]}</span>,
      },
      {
        title: '帧率',
        dataIndex: 'frameRate',
        key: 'frameRate',
      },
      {
        title: '节目声音',
        dataIndex: 'sound',
        key: 'sound',
        render: value => <span>{progSound[value]}</span>,
      },
      {
        title: '播放周期',
        dataIndex: 'playDtPeriod',
        key: 'playDtPeriod',
      },
      {
        title: '素材时长',
        dataIndex: 'matTimeLen',
        key: 'matTimeLen',
      },
      {
        title: '优先级',
        dataIndex: 'priority',
        key: 'priority',
      },
      {
        title: '播放时长',
        dataIndex: 'playTimeLen',
        key: 'playTimeLen',
      },
      {
        title: '播放顺序',
        dataIndex: 'matSn',
        key: 'matSn',
        render: (text, record, index) => (
          <InputNumber
            min={1}
            max={100}
            key={text}
            defaultValue={text}
            //value={record.pmAuditStatus != 0 ? record.matSn : this.state.snArray[record.matId]}
            onChange={value => this.saveMatSn(value, record)}
            disabled={record.pmAuditStatus != 0}
          />
        ),
      },
      {
        title: '操作',
        dataIndex: 'checkstatue',
        key: 'checkstatue',
        render: (text, record, index) => {
          if (record.pmAuditStatus === 0) {
            return (
              <div>
                <Button
                  type="default"
                  shape="circle"
                  icon="check"
                  style={{ marginRight: 10 }}
                  onClick={() => this.onPress(record, index, 1)}
                />
                <Button
                  type="default"
                  shape="circle"
                  icon="close"
                  onClick={() => this.onPress(record, index, 2)}
                />
              </div>
            );
          } else {
            return (
              <Fragment>
                <Link
                  to={{
                    //0373d837-13e4-4c07-9c87-dac893e87316/fb29a7ff-edd2-47e9-8cbb-cd85998b11a0
                    pathname: `/program/programmatdet/${progId}/${record.matId}`,
                    state: { view: true },
                  }}
                >
                  详情
                </Link>
              </Fragment>
            );
          }
        },
      },
    ];

    const contentList = {
      tab1: (
        <Table
          rowKey="matId"
          pagination={false}
          loading={loading}
          dataSource={matList.filter(item => item.pmAuditStatus === 0).sort(snSort)}
          columns={columns}
        />
      ),
      tab2: (
        <Table
          rowKey="matId"
          pagination={false}
          loading={loading}
          dataSource={matList.filter(item => item.pmAuditStatus === 1).sort(snSort)}
          columns={columns}
        />
      ),
      tab3: (
        <Table
          rowKey="matId"
          pagination={false}
          loading={loading}
          dataSource={matList.filter(item => item.pmAuditStatus === 2).sort(snSort)}
          columns={columns}
        />
      ),
    };
    return (
      <PageHeaderLayout
        title="节目详情"
        logo={
          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
        }
        action={this.action(programInfo)}
        content={this.description(programInfo)}
        extraContent={this.extra(programInfo)}
        tabList={tabList}
      >
        <Card
          className={styles.tabsCard}
          bordered={false}
          tabList={operationTabList}
          onTabChange={this.onOperationTabChange}
        >
          {contentList[this.state.operationkey]}
        </Card>
      </PageHeaderLayout>
    );
  }
}
